<template>
	<view>
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!dataLoaded" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- #ifdef MP-WEIXIN -->
		<custom-navber :title="'活动发布'"></custom-navber>
		<!-- #endif -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 15 +'px'}" class="bottom-index">
			<view class="ping-30">
				<!-- 图片上传 -->
				<uni-file-picker ref="files" v-model="imgUrl" return-type="array" limit="6" mode="grid"
					file-mediatype="image" :sizeType="['compressed']"
					:image-styles="{width: '160rpx', height: '160rpx',border:false,background:'#f7f7f7',borderRadius:'20rpx',lineHeight:'160rpx'}">
				</uni-file-picker>
				<!-- 标题输入 -->
				<view class="input-box ali-item-cen flex-dir-row ali-item-cen flex-x-bet">
					<input confirm-type="done" placeholder-class="input-placeholder" type="text" v-model="title"
						placeholder="填写活动标题" cursor-color="#14cc60" :maxlength="23" class="w-100 fs-32 fw-600" />
					<text v-if="title" class="iconfont ic-qingchu fs-40 col-b1 mr-20 ml-20" @click="clearTitle"></text>
					<view class="fs-26 col-b1">{{23-title.length}}</view>
				</view>
				<!-- 多行内容输入,用滚动视图防止内容过长 -->
				<scroll-view scroll-y class="mt-30 w-100 h-100 mp-html-box"
					@click="naTov('/pages/publish/noticeDetail')">
					<mp-html :content="content"></mp-html>
				</scroll-view>
			</view>
			<view class="heng"></view>
			<view class="ping-30">
				<view>
					<view class="br-20 w-100 mt-30 bac-col-f activity-box">
						<view class="w-100 flex-dir-row ali-item-cen flex-x-bet">
							<view class="fs-28 fw-600">添加标签</view>
							<view class="bor-bottom-f3 br-200 bac-col-f text-ali-c ping-0-20 26rpx"
								style="width: 340rpx;">
								<input type="text" v-model="searchTag" confirm-type="done"
									placeholder-style="color:#b1b1b1;font-size:26rpx;text-align:center;"
									placeholder="输入标签名称查找" />
							</view>
						</view>
						<scroll-view scroll-x class="w-100 mt-30">
							<view class="flex-dir-row">
								<view class="flex-dir-row ali-item-cen mr-20 flex-shrink-0"
									v-for="(item,index) in filteredActivityTagList" :key="index"
									@click="activeActivity(item.name)">
									<view style="height: 50rpx;line-height: 50rpx;"
										class="br-10 flex-dir-row ali-item-cen pr-20"
										:class="selectedActivity.includes(item.name) ? 'bac-col-00b col-f' : 'activity-item'">
										<view class="fs-28 ml-20 text-element-1 flex-1">#{{item.name}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 活动分类 -->
				<view class="ping-30-0">
					<view class="flex-dir-row flex-x-bet" @click="showActivityType">
						<view class="fs-28 fw-600">添加分类</view>
						<view class="flex-dir-row ali-item-cen">
							<view class="fs-24 col-b1">
								更多分类
							</view>
							<view class="iconfont ic-you fs-30 mt-5 col-b1"></view>
						</view>
					</view>
					<scroll-view scroll-x class="w-100 mt-30">
						<view class="flex-dir-row">
							<view class="flex-dir-row ali-item-cen mr-20 flex-shrink-0" :key="index"
								v-for="(item, index) in activityTypeList" @click="selectActivityType(item._id)">
								<view style="height: 50rpx;line-height: 50rpx;"
									class="br-10 flex-dir-row ali-item-cen pr-20"
									:class="activityType == item._id ? 'bac-col-00b col-f' : 'activity-item'">
									<view class="fs-28 ml-20 text-element-1 flex-1">{{item.name}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 活动分类弹出框 -->
				<uni-popup ref="popup" type="bottom" border-radius="20rpx 20rpx 0 0" backgroundColor="#fff">
					<view class="slanted-rectangle">
						<view class="fs-28 fw-600 mb-30">全部分类</view>
						<!-- 每行4个，多的换行，可滚动 -->
						<scroll-view scroll-y style="max-height: 600rpx;">
							<view class="flex-dir-row flex-w-wrap" style="height: 100%;">
								<view class="fs-28 activity-type-item" v-for="(item, index) in activityTypeList"
									:key="index" @click="selectActivityType(item._id)"
									:style="{marginRight: (index + 1) % 4 === 0 ? '0' : '3%', width: '22.75%', marginBottom: '30rpx',background:activityType == item._id ? '#14cc60' : '#f7f7f7',color:activityType == item._id ? '#fff' : '#000'}">
									<view class="text-element-1">{{item.name}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</uni-popup>
			</view>
			<view class="heng"></view>
			<view class="ping-0-30">
				<!-- 报名时间 -->
				<view class="ping-30-0">
					<view class="flex-dir-row flex-x-bet ali-item-cen" @click="showStartDate(0)">
						<view class="fs-28 fw-600">报名时间</view>
						<view class="flex-dir-row ali-item-cen">
							<view v-if="signUpSTime == '' || signUpETime == ''" class="fs-26 mr-20 col-b1">选择报名时间
							</view>
							<scroll-view v-else scroll-x class="fs-28 mr-20 text-element-1 whi-sp"
								style="width: 300rpx;">{{signUpSTime + ' 至 ' + signUpETime}}</scroll-view>
							<view class="iconfont ic-you fs-32 mt-5 col-b1"></view>
						</view>
					</view>
				</view>
				<!-- 活动时间 -->
				<view class="bor-top-f3 ping-30-0">
					<view class="flex-dir-row flex-x-bet ali-item-cen" @click="showStartDate(1)">
						<view class="fs-28 fw-600">活动时间</view>
						<view class="flex-dir-row ali-item-cen">
							<view v-if="activitySTime == '' || activityETime == ''" class="fs-26 mr-20 col-b1">选择活动时间
							</view>
							<scroll-view v-else scroll-x class="fs-28 mr-20 text-element-1 whi-sp"
								style="width: 300rpx;">{{activitySTime + ' 至 ' + activityETime}}</scroll-view>
							<view class="iconfont ic-you fs-32 mt-5 col-b1"></view>
						</view>
					</view>
				</view>
				<!-- 报名时间活动时间范围选择 -->
				<uni-popup ref="startDatePopup" type="bottom" border-radius="20rpx 20rpx 0 0" backgroundColor="#fff">
					<view class="slanted-rectangle">
						<view class="fs-28 fw-600 mb-30">{{timeType == 0 ? '报名时间' : '活动时间'}}</view>
						<DateSelector :mode="selectDateType" @onSubmit="onDateSelectorSubmit" :minDate="minDate"
							:maxDate="maxDate" :defaultStartDate="startDate" :defaultEndDate="endDate" />
					</view>
				</uni-popup>
				<!-- 活动地点 -->
				<view class="bor-top-f3 ping-30-0">
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="fs-28 fw-600">活动地点</view>
						<view class="flex-dir-row ali-item-cen">
							<view @click="showActivityLocation" v-if="activityLocation == ''"
								class="fs-26 mr-20 col-b1">选择活动地点</view>
							<scroll-view v-else scroll-x class="fs-28 mr-20 text-element-1 whi-sp"
								style="width: 300rpx;">
								<input type="number" class="text-ali-r fs-28" v-model="activityLocation"
									confirm-type="done" placeholder-class="input-activity-number"
									placeholder="请输入活动地点" /></scroll-view>
							<view @click="showActivityLocation" class="iconfont ic-you fs-32 mt-5 col-b1"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="heng"></view>
			<view class="ping-0-30">
				<!-- 活动是否付费 -->
				<view class="bor-top-f3 ping-30-0">
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="fs-28 fw-600">付费活动</view>
						<!-- 多选框 -->
						<checkbox-group @change="activityIsPay = !activityIsPay">
							<checkbox color="#14cc60" :checked="activityIsPay" />
						</checkbox-group>
					</view>
				</view>
				<!-- 如果是付费活动，展示付费金额输入框 -->
				<view v-if="activityIsPay">
					<view class="bor-top-f3 ping-30-0">
						<view class="flex-dir-row flex-x-bet ali-item-cen">
							<view class="fs-28 fw-600">付费金额</view>
							<view class="text-ali-r">
								<input type="number" class="text-ali-r fs-28" v-model="activityPay" confirm-type="done"
									placeholder-class="input-activity-number" placeholder="请输入付费金额，单位：分" />
								<view v-if="activityPay" class="fs-24 col-00ba31">{{(activityPay/100).toFixed(2) + '元'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 活动人数 -->
				<view class="bor-top-f3 ping-30-0">
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="fs-28 fw-600">活动人数</view>
						<input type="number" class="text-ali-r fs-28" v-model="activityPeople" confirm-type="done"
							placeholder-class="input-activity-number" placeholder="请输入活动人数" />
					</view>
				</view>
				<view>
					<view class="w-100 ping-30-0 bac-col-f activity-box bor-top-f3">
						<view class="w-100 flex-dir-row ali-item-cen flex-x-bet mb-30">
							<view class="fs-28 fw-600">社群二维码</view>
						</view>
						<uni-file-picker ref="files" v-model="groupCodeImg" return-type="array" limit="1" mode="grid"
							file-mediatype="image" :sizeType="['compressed']"
							:image-styles="{width: '160rpx', height: '160rpx',border:false,background:'#f7f7f7',borderRadius:'20rpx',lineHeight:'160rpx'}">
						</uni-file-picker>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部定位发布按钮 -->
		<view @click="publish" class="w-100 fixed-bottom bac-col-00b">
			<view class="w-100 bg-col-00b text-ali-c">
				<view class="fs-30 col-f fw-600">发布活动</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DateSelector from '@/components/dengrq-datetime-picker/dateSelector/index.vue';
	export default {
		components: {
			DateSelector
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif // 获取菜单按钮的坐标
				imgUrl: [], // 活动图片
				title: '', // 活动标题
				content: '<p style="color: #b1b1b1;font-size: 30rpx;">点击去填写活动详情</p>', // 活动详情
				activityTagList: [], // 活动标签列表
				searchTag: '', // 搜索标签
				selectedActivity: [], // 选择的标签
				activityType: '', // 活动分类
				activityTypeList: [], // 活动分类列表
				selectDateType: 4, // 选择报名时间范围的类型
				minDate: '', // 可选的最小日期,默认当前时间后一年
				maxDate: '', // 可选的最大日期,默认当前时间后一年
				startDate: new Date().toLocaleDateString(), // 选中的开始时间
				endDate: '', // 选中的结束时间
				timeType: 0, //选中的时间类型，报名0-活动1
				signUpSTime: '', // 报名开始时间
				signUpETime: '', // 报名结束时间
				activitySTime: '', // 活动开始时间
				activityETime: '', // 活动结束时间
				latitude: '', // 纬度
				longitude: '', // 经度
				activityLocation: '', // 活动地点
				activityPeople: '', // 活动人数
				activityIsPay: false, // 活动是否付费
				activityPay: '', // 付费金额
				groupCodeImg: [], // 社群二维码
				activityId: '', // 活动id
				activityData: [], // 活动数据
				dataLoaded: false, // 数据是否加载完成
			}
		},
		computed: {
			// 计算筛选后的活动标签列表
			filteredActivityTagList() {
				if (!this.searchTag.trim()) {
					return this.activityTagList;
				}
				return this.activityTagList.filter(item => item.name.includes(this.searchTag));
			}
		},
		mounted() {
			this.minDate = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toLocaleDateString();
			this.maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toLocaleDateString();
		},
		onLoad(e) {
			if (e.id) {
				this.activityId = e.id;
				// 如果存在活动id则为修改，获取活动详情
				this.getActivityDetailForEdit();
			}
			// 获取活动标签列表
			this.getTagList();
			// 获取活动分类
			this.getActivityType();
		},
		methods: {
			// 获取活动详情
			getActivityDetailForEdit() {
				this.$Route('get-private-data', true).getActivityDetailForEdit(this.activityId).then((res) => {
					this.activityData = res.data[0];
					this.imgUrl = res.data[0].imgs; // 活动图片
					this.title = res.data[0].name; // 活动标题
					this.content = res.data[0].content; // 活动详情
					this.selectedActivity = res.data[0].tags; // 活动标签
					this.activityType = res.data[0].type; // 活动分类
					this.signUpSTime = this.formatTimestamp(res.data[0].signup_start_time); // 报名开始时间
					this.signUpETime = this.formatTimestamp(res.data[0].signup_end_time); // 报名结束时间
					this.activitySTime = this.formatTimestamp(res.data[0].start_time); // 活动开始时间
					this.activityETime = this.formatTimestamp(res.data[0].end_time); // 活动结束时间
					this.latitude = res.data[0].location_lat; // 纬度
					this.longitude = res.data[0].location_lng; // 经度
					this.activityLocation = res.data[0].location; // 活动地点
					this.activityIsPay = res.data[0].is_pay; // 活动是否付费
					this.activityPay = res.data[0].pay_amount; // 付费金额
					this.activityPeople = res.data[0].people_num; // 活动人数
					this.groupCodeImg = res.data[0].group_qrcode; // 社群二维码
					// 判断活动是否在进行中，进行中的活动不能被编辑
					if (res.data[0].start_time < Date.now() && res.data[0].end_time > Date.now()) {
						this.$Toast('活动正在进行中，不能被编辑');
						setTimeout(() => this.$NavigateBack(), 1600)
						return;
					}
					// 判断活动是否已结束，已结束的活动不能被编辑
					if (res.data[0].end_time < Date.now()) {
						this.$Toast('活动已结束，不能被编辑');
						setTimeout(() => this.$NavigateBack(), 1600)
						return;
					}
					// 如果是付费活动且报名已开启不能被编辑
					if (res.data[0].is_pay && res.data[0].signup_start_time < Date.now()) {
						this.$Toast('付费活动报名已开启，不能被编辑');
						setTimeout(() => this.$NavigateBack(), 1600)
						return;
					}
					// 如果是管理端新增的活动，提示用户到管理端编辑
					if (!this.activityData.imgs[0].uuid) {
						this.$Toast('该活动为管理端创建，请到管理端编辑');
						setTimeout(() => this.$NavigateBack(), 1600)
						return;
					}
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取活动标签列表
			getTagList() {
				this.$Route('get-public-data').getTagList().then((res) => {
					this.activityTagList = res.data;
					this.dataLoaded = true;
				}).catch((err) => {
					this.dataLoaded = true;
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取活动分类
			getActivityType() {
				this.$Route('get-public-data').getActivityType().then((res) => {
					this.activityTypeList = res.data;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 向用户获取授权并打开地图选择位置	
			showActivityLocation() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.chooseLocation({
							success: (res) => {
								if (res.address) {
									this.activityLocation = res.address + res.name;
								} else {
									this.activityLocation = res.name;
								}
								this.latitude = res.latitude;
								this.longitude = res.longitude;
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			// 显示报名时间范围选择
			showStartDate(e) {
				this.timeType = e;
				this.$refs.startDatePopup.open();
			},
			// 确认报名时间范围
			onDateSelectorSubmit({
				startDate,
				endDate
			}) {
				if (this.timeType == 0) {
					this.signUpSTime = startDate;
					this.signUpETime = endDate;
				} else {
					this.activitySTime = startDate;
					this.activityETime = endDate;
				}
				this.$refs.startDatePopup.close();
			},
			// 选择标签
			activeActivity(index) {
				// 如果标签已存在则删除，不存在则添加
				if (this.selectedActivity.includes(index)) {
					this.selectedActivity = this.selectedActivity.filter(item => item !== index);
				} else {
					this.selectedActivity.push(index);
				}
			},
			// 清除活动标题
			clearTitle() {
				this.title = '';
			},
			// 显示活动分类选择
			showActivityType() {
				this.$refs.popup.open();
			},
			// 选择活动分类
			selectActivityType(item) {
				this.activityType = item;
				this.$refs.popup.close();
			},
			// 跳转
			naTov(url) {
				// 传递this.content富文本过去并且防止过长折叠
				// 默认的this.content不传递
				const content = this.content == '<p style="color: #b1b1b1;font-size: 30rpx;">点击去填写活动详情</p>' ? '' : this
					.content;
				uni.navigateTo({
					url: `${url}?data=${encodeURIComponent(content)}&source=notice`,
					events: {
						refreshData: (data) => {
							if (data.length > 7) {
								this.content = data;
							} else {
								this.content = '<p style="color: #b1b1b1;font-size: 30rpx;">点击去填写活动详情</p>'
							}
						}
					}
				})
			},
			// 发布/编辑活动
			publish() {
				this.$debounce(async () => {
					// 震动
					uni.vibrateShort();
					// 先判断必填所有参数是否填写完成
					if (this.imgUrl.length == 0) {
						this.$Toast('请上传活动图片');
						return;
					}
					if (this.title.trim() == '') {
						this.$Toast('请填写活动标题');
						return;
					}
					if (this.content == '<p style="color: #b1b1b1;font-size: 30rpx;">点击去填写活动详情</p>' || this
						.content
						.trim() ==
						'') {
						this.$Toast('请填写活动详情');
						return;
					}
					// 如果付费活动，付费金额不能为空
					if (this.activityIsPay && (!this.isInteger(this.activityPay) || Number(this.activityPay) <=
							0)) {
						this.$Toast('请检查活动付费金额');
						return;
					}
					// 分类不能为空
					if (this.activityType.trim() == '') {
						this.$Toast('请选择活动分类');
						return;
					}
					// 如果活动地点为空
					if (this.activityLocation.trim() == '' || this.latitude == '' || this.longitude == '') {
						this.$Toast('请选择活动地点');
						return;
					}
					// 检查报名时间和活动时间
					if (this.signUpSTime.trim() == '' || this.signUpETime.trim() == '' || this.activitySTime
						.trim() == '' ||
						this.activityETime.trim() == '') {
						this.$Toast('请选择报名时间和活动时间');
						return;
					}
					// 转换报名时间和活动时间为时间戳
					const signUpSTime = new Date(this.signUpSTime).getTime(); // 报名开始时间
					const signUpETime = new Date(this.signUpETime).getTime(); // 报名结束时间
					const activitySTime = new Date(this.activitySTime).getTime(); // 活动开始时间
					const activityETime = new Date(this.activityETime).getTime(); // 活动结束时间
					// 如果报名开始时间大于报名结束时间，则提示用户
					if (signUpSTime > signUpETime) {
						this.$Toast('报名开始时间不能大于报名结束时间');
						return;
					}
					// 如果活动开始时间大于活动结束时间，则提示用户
					if (activitySTime > activityETime) {
						this.$Toast('活动开始时间不能大于活动结束时间');
						return;
					}
					// 如果活动开始时间小于报名结束时间，则提示用户
					if (activitySTime < signUpETime) {
						this.$Toast('活动开始时间不能小于报名结束时间');
						return;
					}

					if (!this.isInteger(this.activityPeople) || Number(this.activityPeople) <= 0) {
						this.$Toast('请检查活动人数');
						return;
					}
					if (this.activityId) {
						await this.editActivity();
					} else {
						await this.publishActivity();
					}
				}, 500, true, "publish")
			},
			// 编辑活动
			async editActivity() {
				// 开始编辑活动
				await this.$Route('update-private-data').updateActivityData({
					activityId: this.activityId, // 活动id
					title: this.title, // 活动标题
					content: this.content, // 活动详情
					imgUrl: this.imgUrl, // 活动图片
					activityTag: this.selectedActivity, // 活动标签
					activityType: this.activityType, // 活动分类
					signUpSTime: this.signUpSTime, // 报名开始时间
					signUpETime: this.signUpETime, // 报名结束时间
					activitySTime: this.activitySTime, // 活动开始时间
					activityETime: this.activityETime, // 活动结束时间
					latitude: this.latitude, // 纬度
					longitude: this.longitude, // 经度
					activityLocation: this.activityLocation, // 活动地点
					activityPeople: this.activityPeople, // 活动人数
					activityIsPay: this.activityIsPay, // 活动是否付费
					activityPay: this.activityPay, // 付费金额
					groupCodeImg: this.groupCodeImg, // 社群二维码
				}).then((res) => {
					this.$Toast(res.msg);
					this.getOpenerEventChannel().emit('refreshData', '')
					setTimeout(() => this.$NavigateBack(), 1000)
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						} else if (code === 400) {
							this.$NavigateTo('/pages/user/userPersonal'); // 跳转到个人信息页面
						} else if (code == 500) {
							this.$NavigateBack()
						}
					}, 1000);
				})
			},
			// 发布活动
			async publishActivity() {
				// 开始发布活动
				await this.$Route('add-private-data').addActivityData({
					title: this.title, // 活动标题
					content: this.content, // 活动详情
					imgUrl: this.imgUrl, // 活动图片
					activityTag: this.selectedActivity, // 活动标签
					activityType: this.activityType, // 活动分类
					signUpSTime: this.signUpSTime, // 报名开始时间
					signUpETime: this.signUpETime, // 报名结束时间
					activitySTime: this.activitySTime, // 活动开始时间
					activityETime: this.activityETime, // 活动结束时间
					latitude: this.latitude, // 纬度
					longitude: this.longitude, // 经度
					activityLocation: this.activityLocation, // 活动地点
					activityPeople: this.activityPeople, // 活动人数
					activityIsPay: this.activityIsPay, // 活动是否付费
					activityPay: this.activityPay, // 付费金额
					groupCodeImg: this.groupCodeImg, // 社群二维码
				}).then((res) => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.$NavigateTo('/pages/index/index');
					}, 1000);
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						} else if (code === 400) {
							this.$NavigateTo('/pages/user/userPersonal'); // 跳转到个人信息页面
						} else if (code == 500) {
							this.$NavigateBack()
						}
					}, 1000);
				})
			},
			// 检查整数
			isInteger(str) {
				return /^[0-9]+$/.test(str);
			},
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const Y = date.getFullYear();
				const M = String(date.getMonth() + 1).padStart(2, '0'); // 月份补0
				const D = String(date.getDate()).padStart(2, '0'); // 日期补0
				const h = String(date.getHours()).padStart(2, '0'); // 小时补0
				const m = String(date.getMinutes()).padStart(2, '0'); // 分钟补0
				const s = String(date.getSeconds()).padStart(2, '0'); // 秒钟补0
				return `${Y}-${M}-${D} ${h}:${m}:${s}`;
			}
		}
	}
</script>

<style lang="scss">
	.upload-image {
		width: 160rpx;
		height: 160rpx;

		.upload-image-item {
			line-height: 160rpx;
		}
	}

	.textarea-box {
		height: 300rpx;
	}

	.input-box {
		width: 100%;
		height: 90rpx;
		border-bottom: 1rpx solid #f3f3f3;
	}

	.input-placeholder {
		font-size: 30rpx;
		color: #b1b1b1;
		font-weight: normal;
	}

	.textarea-placeholder {
		font-size: 28rpx;
		color: #b1b1b1;
		font-weight: normal;
	}

	.mp-html-box {
		height: 300rpx;
	}

	.activity-item {
		border-radius: 10rpx;
		background-color: #f7f7f7;
	}

	.slanted-rectangle {
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		padding: 0rpx 30rpx;
		min-height: 400rpx;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -60rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.activity-type-item {
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		width: 22%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.input-activity-number {
		font-size: 26rpx;
		color: #b1b1b1;
		font-weight: normal;
		text-align: right;
		width: 300rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 9999;
		transition: background-color 0.2s ease;
	}

	.fixed-bottom:active {
		background-color: #11b051 !important;
		/* 点击时背景颜色变化 */
	}
</style>